<%@ page language="java" contentType="text/html; charset=UTF-8"
	pageEncoding="utf-8"%>
<%@ taglib prefix="c" uri="http://java.sun.com/jsp/jstl/core"%>
<%@ taglib prefix="z" uri="http://www.liuhuazhi.com/diancan"%>
<!DOCTYPE html PUBLIC "-//W3C//DTD HTML 4.01 Transitional//EN" "http://www.w3.org/TR/html4/loose.dtd">
<html>
<head>
<meta http-equiv="Content-Type" content="text/html; charset=utf-8">
<title>菜品列表</title>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<style type="text/css">

.searchinput {
	border-right-width: 0px;
	padding-left: 3px;
	width: 168px;
	font-family: arial;
	float: left;
	border-top-width: 0px;
	border-bottom-width: 0px;
	color: #636365;
	margin-left: 4px;
	font-size: 16pt;
	vertical-align: middle;
	border-left-width: 0px;
	margin-right: 3px;
}

.tab_search {
	border-bottom: #cccccc 1px solid;
	border-left: #cccccc 1px solid;
	height: 30px;
	border-top: #cccccc 1px solid;
	border-right: #cccccc 1px solid;
}

a {
	text-decoration: none;
	padding: 10px;
}

.searchaction {
	float: left;
}

.head {
	padding-top: 1%;
	margin: 0 auto;
	text-align: center;
	margin: 0 auto;
}

body {
	background-image: url("image/body_bj.jpg");
}

.search {
	float: left;
}

.head_item {
	margin: 0 auto;
	width: 90%;
	height: 90%;
	border: 1px solid;
}

.cai {
	width: 90px;
	float: left; margin-left：5 %;
	margin-top: 1.3%;
	padding-left: 1%;
}

.input_find {
	float: left;
	padding-top: 1%;
}

.header {
	height: 50px;
}

.selectedd {
	padding: 5px;
	height: 40px;
}

.select_div {
	float: left;
	margin-top: 0.5%;
	height: 40px;
}

.table1 {
	width: 97%;
	border: 1px solid;
	padding: 1%;
	margin: 0 auto;
	border: 1px solid;
	padding: 1%;
}

.foot {
	margin: 0 auto;
	padding: 0 auto;
	text-align: center;
}

.tanchu {
	height: 400px;
	width: 550px;
	position: absolute;
	z-index: 10;
	display: none;
	overflow: hidden;
	top: 70.5px;
	left: 50%;
	margin-left: -225px;
	color: #666;
	border: 4px solid rgba(0, 0, 0, .1);
	border-radius: 5px;
}

.tanchu .title {
	width: 100%;
	position: relative;
	padding: 0 10px;
	height: 31px;
	line-height: 31px;
	background: #f3f3f3;
	font-size: 16px;
	font-family: "Microsoft YaHei"
}

.tanchu .title_name {
	width: auto;
	height: auto;
	float: left;
}

.tanchu .title .guanbi {
	position: relative;
	float: right;
	cursor: pointer;
	display: block;
	right: 10px;
	top: 10px;
	width: 20px;
	height: 20px;
}

.tanchu iframe {
	width: 550px;
	height: 100%;
	margin: 0 auto;
	background-image: url("image/body_bj.jpg");
}

.tanchu-bg {
	display: none;
	position: absolute;
	left: 0px;
	top: 0px;
	z-index: 9;
	opacity: 0.15;
	width: 100%;
	height: 950px;
	background-color: rgb(0, 0, 0);
}
</style>
<script type="text/javascript" src="js/jquery-3.2.1.js"></script>
<script type="text/javascript" src="js/jquery.form.js"></script>
<script type="text/javascript">
	$(function() {
		$(".btn2").click(function() {
			var a = $(".selectedd").val();
			location = "GoodsServlet?op=14&curpage=1&pagesize=5&type_id=" + a;
		});
		$(".onCart").click(function() {
			var a = $(this).attr("gid");
			var b = window.location.href;
			$.post("CartServlet", {
				op : 5,
				gid : a,
				location : b,
				phone : 999999
			}, function() {
				alert("添加購物車成功");
				location.reload();
			});
		});
	});
</script>
</head>
<body>
	<div class="head">
		<h2>点餐</h2>
		<hr>
	</div>
	<div class="head_item">
		<div class="header">
			<div class="cai">搜索菜品：</div>
			<div class="input_find">
				<form action="GoodsServlet" name="search">
					<table border="0" cellpadding="0" cellspacing="0"
						class="tab_search">
						<tr>
							<td><input type="hidden" name="op" value="15"> <input
								type="hidden" name="curpage" value="1"> <input
								type="hidden" name="pagesize" value="5"> <input
								type="text" name="name" title="Search" class="searchinput"
								id="searchinput" value="" /></td>
							<td><input type="image" width="21" height="17"
								class="searchaction" alt="Search" src="image/magglass.gif"
								border="0" /></td>
						</tr>
					</table>
				</form>
			</div>
			<c:set var="z" value="${map.selected}"></c:set>
			<div class="cai">菜品分类：</div>
			<div class="select_div">
				<select name="select" class="selectedd">
					<option value="9999">全部菜式</option>
					<c:forEach items="${map.typelist}" var="tl">
						<c:if test="${tl.type_id==z}" var="x">
							<option value="${tl.type_id}" selected>${tl.type}</option>
						</c:if>
						<c:if test="${not x}">
							<option value="${tl.type_id}">${tl.type}</option>
						</c:if>
					</c:forEach>
				</select>
			</div>
			<div class="cai">
				<button
					style="width: 100px; height: 30px; margin-top: -10px; background-color: #4e72b8; font-size: 20px; color: white;"
					class="btn2">分类搜索</button>
			</div>
		</div>
		<hr>
		<table class="table1">
			<tr>
				<th>菜名</th>
				<th>介绍</th>
				<th>价格</th>
				<th>销售量</th>
				<th>操作</th>
			</tr>
			<c:forEach items="${map.Goodslist}" var="x">
				<tr>
					<th style="width: 10%"><div
							style="width: 100px; height: 100px; margin: 0 auto">
							<img src="upload/${x.image}" width="80px" height="80px">
							${x.name} <br>
						</div></th>
					<th style="width: 20%">${x.detail}</th>
					<th style="width: 5% ；">￥：${x.price}</th>
					<th style="width: 5%">${x.sale_num}</th>
					<th><input type="button" value="加入购物车" gid="${x.goods_id}"
						class="onCart"></th>
				</tr>
			</c:forEach>
		</table>
	</div>
	<div style="text-align: center;">
		<z:fenye url="GoodsServlet" pagesize="${param.pagesize}"
			total="${map.total}" curpage="${param.curpage}" op="13" />
	</div>
	<div
		style="width: 100px; height: 100px; padding-left: 4%; margin-left: 1%; padding-top: 10px;">
		<img alt="" src="image/cart13.png" width="75px" height="60px"
			class="cart">
	</div>
	<!-- 弹出层  -->
	<div class="tanchu">
		<div class="title">
			<div class="guanbi" onclick="guanbi()">
				<img alt="关闭" src="image/close.png" width="100%" height="100%">
			</div>
		</div>
		<iframe frameborder="0" src="CartServlet?op=6&phone=999999"
			name="iframe2"></iframe>
	</div>

</body>
<script type="text/javascript">
	//
	//	隐藏弹出层
	//
	function guanbi() {
		$(".tanchu-bg").hide();
		$(".tanchu").hide();
	}

	//
	//显示弹出层
	//
	function xianshi() {
		var height = document.body.scrollHeight;
		$(".tanchu-bg").attr("height", height);
		$(".tanchu-bg").show();
		$(".tanchu").show();
	}

	$(".cart").click(function() {
		xianshi();
	});
	$(".close").click(function() {
		guanbi();
	});
</script>
</html>